<template>
  <div style='display: flex;'>
    
    <!--题目信息(title,tags,markdownContent) TODO 高度需要动态传入 -->
    <QuestionInfo
      id='show-topic'
      :title='title'
      :tags='tags'
      :markdown-content='markdownContent' />
    
    <BaseIDE
      @getCodeAnswer='getCode'
      :code-template='codeTemplate'
      :ide-font-size='ideFontSize'
      :code-mode='codeMode'
      :read-only='readOnly'
      :ide-theme='ideTheme' />
    
    <!--设置按钮-->
    <a-button class='setting-btn'
              @click='visible = true'
              type='primary'
              shape='circle'
              icon='setting'
              :size="'large'" />
    
    <!--设置框-->
    <a-modal
      v-model='visible'
      title='代码编辑器设置'
      centered
      @ok='handleOk'>
      <a-alert
        message='该代码编辑器快捷键与 [pycharm, idea] 快捷键相同'
        type='info'
        show-icon />
      <br>
      <a-form
        :label-col='{ span: 15 }'
        :wrapper-col='{ span: 9 }'
        labelAlign='left'
        layout='vertical'>
        
        <a-form-item label='编程语言设置' :required='true'>
          <a-select default-value='text/x-python' v-model='codeMode'>
            <a-select-option value='text/x-java'>
              Java
            </a-select-option>
            <a-select-option value='text/x-python'>
              Python
            </a-select-option>
            <a-select-option value='text/x-csrc'>
              C
            </a-select-option>
            <a-select-option value='text/x-c++src'>
              C++
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label='字体大小设置' :required='true'>
          <a-select
            default-value='20'
            v-model='ideFontSize'>
            <a-select-option
              :value='12 + i' v-for='i in 12' :key='i'>
              {{ i + 12 }} px
            </a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label='编辑器样式设置' :required='true'>
          <a-select
            default-value='idea'
            v-model='ideTheme'>
            <a-select-option
              :value='theme'
              v-for='theme in supportThemes'
              :key='theme'>
              {{ theme }}
            </a-select-option>
          </a-select>
        </a-form-item>
      
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import BaseIDE from '@/views/reply/components/BaseIDE.vue'
import QuestionInfo from '@/views/reply/components/QuestionInfo.vue'

export default {
  components: {
    QuestionInfo,
    BaseIDE
  },
  props: {
    // 编辑器高度
    ideHeight: {
      required: false,
      default: '640px',
      type: String
    },
    codeTemplate: {
      required: false,
      default: '',
      type: String
    },
    title: {
      required: false,
      default: '',
      type: String
    },
    tags: {
      required: false,
      default: () => [],
      type: Array
    },
    markdownContent: {
      required: false,
      default: '',
      type: String
    },
    readOnly: {
      required: false,
      default: false,
      type: Boolean
    }
  },
  name: 'QuestionPage',
  data() {
    return {
      visible: false,
      ideFontSize: 20,
      ideTheme: 'idea',
      codeMode: 'text/x-python',
      supportThemes: ['idea', 'eclipse', 'material-darker', 'blackboard', 'mdn-like', 'paraiso-light', 'base16-dark', 'cobalt', 'ayu-mirage', 'juejin', 'duotone-light']
    }
  },
  watch: {
    ideTheme(n, o) {
      localStorage.setItem('IDE_STYLE', n)
    },
    codeMode(n, o) {
      localStorage.setItem('IDE_CODE', n)
    },
    ideFontSize(n, o) {
      localStorage.setItem('IDE_FONT_SIZE', n)
    }
  },
  created() {
    if (localStorage.getItem('IDE_CODE')) {
      this.codeMode = localStorage.getItem('IDE_CODE')
    }
    if (localStorage.getItem('IDE_STYLE')) {
      this.ideTheme = localStorage.getItem('IDE_STYLE')
    }
    if (localStorage.getItem('IDE_FONT_SIZE')) {
      this.ideFontSize = parseInt(localStorage.getItem('IDE_FONT_SIZE'))
    }
  },
  methods: {
    handleOk() {
      this.visible = false
    },
    getCode(code) {
      // BaseIDE 传过来的代码 => 继续传给父组件
      this.$emit('getCodeAnswer', code)
    }
  }
}
</script>

<style scoped lang='less'>
#show-topic {
  width: 40vw;
  overflow: auto;
  height: 80vh;
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  
  // 滚动条的轨道（里面装有Thumb）
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  
  // 滚动条的轨道（里面装有Thumb）
  &::-webkit-scrollbar-track-piece {
    background-color: transparent;
  }
  
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: rgba(140, 143, 148, 0.3);
    cursor: pointer;
    border-radius: 4px;
  }
  
  // 边角，即两个滚动条的交汇处
  &::-webkit-scrollbar-corner {
    display: none;
  }
  
  // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
  &::-webkit-resizer {
    display: none;
  }
}

.setting-btn {
  position: absolute;
  top: 550px;
  right: 20px;
}
</style>